<style lang="less" scoped>
.vehicle-item {
    background: linear-gradient(180deg, #e6f5ff 0%, #ffffff 40%);
    border-radius: 20rpx;
    position: relative;
    color: #333;
    font-size: 24rpx;

    &.mb {
        margin-bottom: 30rpx;
    }

    .item-label-count-down {
      position: absolute;
      top: -12rpx;
      left: -6rpx;
      z-index: 99;
      width: 190rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #4e260a;
      font-weight: 500;
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        background-image: url(https://pic.bangbangtongcheng.com/static/MyPublic/countdown.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        top: 0;
        left: -10rpx;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        z-index: 2;
        left: 20rpx;
      }
    }
    .item-box {
        display: flex;
        padding: 30rpx 20rpx;

        .goods-image {
            background-color: #f8f8f8;
            width: 280rpx;
            height: 200rpx;
            border-radius: 20rpx;
        }
        .item-info {
            padding-left: 20rpx;
            width: calc(100% - 280rpx);
            height: 200rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .item-title {
                font-size: 32rpx;
                line-height: 44rpx;
                font-weight: 600;
                width: 100%;
                color: #000;
                .ellipsis {
                    width: 100%;
                    display: inline-block;
                }
            }
            // .subclass-box {
            //     width: 100%;
            // }
            .subclass-item {
                width: 100%;
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;
                flex-flow: row wrap;

                .card-icon {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 6rpx;
                    vertical-align: text-top;
                }
                .subclass {
                    width: 50%;
                    line-height: 32rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    line-clamp: 1;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
                .price-box {
                    width: 100%;
                }
                .price {
                    width: 100%;
                    color: #E00201;
                    font-size: 32rpx;
                    font-weight: 600;
                }
            }
        }
    }
    .ellipsis {
		/*强制文本在一行内显示*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.title-tag {
    min-width: 70rpx;
    height: 40rpx;
    background: #e7f5f4;
    border-radius: 4rpx;
    box-sizing: border-box;
    vertical-align: middle;
    color: #0fa291;
    font-size: 24rpx;
    line-height: 24rpx;
    margin-right: 10rpx;
    padding: 8rpx 11rpx;
    display: inline-block;
}
</style>

<template>
    <view class="vehicle-item" :class="{mb: itemMB}" @click="details">
        <view v-if="data.upStatus == 1 && data.examineStatus == 2" class="item-label-count-down">
            <view class="text">
                有效期{{ 30 - data.daysSinceCreateDate }}天
            </view>
        </view>
        <view class="item-box">
            <image
                class="goods-image"
                mode="aspectFit"
                :src="data.vehicleCoverPicture"
            />
            <view class="item-info">
                <view class="item-title">
                    <text class="name ellipsis">
                        <text class="title-tag">
                            {{data.vehicleType == 1 ? '到店新车' : data.vehicleType == 2 ? '二手车' : '在售车系'}}
                        </text>
                        {{ data.title }}
                    </text>
                </view>
                <!-- <view class="subclass-box">
                </view> -->
                <view class="subclass-item">
                    <view class="subclass">
                        <image v-if="setYM" class="card-icon"
                            src="https://pic.bangbangtongcheng.com/static/bbcz/index-licensing.png" />
                        {{ setYM }}
                    </view>
                    <view class="subclass">
                        <image v-if="setMileage" class="card-icon"
                            src="https://pic.bangbangtongcheng.com/static/bbcz/index-mileage.png" />
                        {{ setMileage }}
                    </view>
                    <view class="subclass">
                        <image v-if="setBrand[0]" class="card-icon"
                            src="https://pic.bangbangtongcheng.com/static/MyPublic/car-brand.png" />
                        {{ setBrand[0] || '' }}
                    </view>
                    <view class="subclass">
                        <image v-if="setBrand[1]" class="card-icon"
                            src="https://pic.bangbangtongcheng.com/static/MyPublic/car-model.png" />
                        {{ setBrand[1] || '' }}
                    </view>
                </view>
                <view class="subclass-item">
                    <view class="price-box" style="text-align: right">
                        <view class="price subclass">
                            {{ setPrice }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        itemMB: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        setYM(){
            let str,y,m;
            const data = this.data;
            if (data.licensingTimeYear) {
                y = data.licensingTimeYear.slice(2,5);
            }
            if (data.licensingTimeMonth) {
                m = data.licensingTimeMonth * 1;
            }
            if (y && m) {
                str = `${y}年${m}月上牌`;
            }
            return str || '';
            
        },
        setMileage(){
            let str;
            const data = this.data;
            if (data.mileage) {
                if (data.mileage <= 10000) str = `${data.mileage}`;
                else str = `${data.mileage / 10000}万`;
                str += '公里';
            }
            return str || '';
        },
        setBrand(){
            let arr, vrand = this.data.vehicleBrandModel; 
            if (this.data.vehicleType != 2 && vrand && vrand.split('|').length >= 1) {
                arr = vrand.split('|');
            }
            return arr || [];
        },
        setPrice(){
            let str;
            const data = this.data;
            if (data.vehicleType != 3) {
                str = `${data.price}万`
            } else {
                const p = data.intervalPrice;
                str = p.includes('万') ? p : `${p}万`;
            }
            return str || '';
        },
    },
    data() {
        return {
            
        };
    },
    methods: {
        details() {
            this.$emit('item-click',this.data);
        }
    }
}
</script>